<template>
  <div class="loginContainer">      
    <el-form class="loginForm" :model="formData" ref="loginFormRef" :rules="rules"  :inline="false">
        <div class="loginTitle">系统登录</div>
        <el-form-item prop="username">
            <el-input v-model="formData.username" placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-col :span="10">
                <el-input v-model="formData.code" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="8">
                <img :src="imgSrc" alt="" @click="getImg" />
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-col :span="11">
                <el-button class="mybtn" type="primary" size="default" @click="handleLogin">登录</el-button>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
                <el-button class="mybtn" size="default">取消</el-button>
            </el-col>
        </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang='ts'>
import useImage from '@/composables/login/useImage';
import useBaseLogin from '@/composables/login/useBaseLogin';
import useLogin from '@/composables/login/useLogin';

// 验证码
const {imgSrc, getImg} = useImage()

// 基础数据
const { formData, rules, loginFormRef } = useBaseLogin()

// 登录
const { handleLogin } = useLogin(formData)

</script>
<style scoped lang='scss'>
.loginContainer {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .loginForm {
        height: 320px;
        width: 400px;
        border-radius: 10px;
        padding: 20px 35px;
        // background: pink;
        box-shadow: 0 0 25px #cac6c6;
        .loginTitle {
            font-size: 24px;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }
        img {
            margin-top:10px;
        }
        .mybtn {
            width: 100%;
        }
    }
}
</style>